var circleCenterX = 360;
var circleCenterY = 360;
var diameterFirstLayer = 350;

function drawShape() {
	var layer =0;
	for ( var i = 32; i > 0; i /= 2) {
		var relatives = new Array(i);
		for ( var j = 0; j < relatives.length; j++) {
			relatives[j] = new Array("Navn navnesen","1932- 1997");
		}
		makeCakeDiagram(relatives, diameterFirstLayer-layer*(diameterFirstLayer/6));
		layer++;
	}
}

function makeCakeDiagram(relatives, diameter) {
	var canvas = document.getElementById("gedTree");
	var ctx = canvas.getContext('2d');

	var pies = relatives.length;
	var angleIncrease = (Math.PI * 2 * 180) / (pies * 360);
	var ninety = (Math.PI * 2 * 90) / (360);

	var red = "rgba(200,100,100,1.0)";
	var blue = "rgba(100,100,200,1.0)";
	var black = "rgba(0,0,0,1.0)";

	ctx.font = "13px sans-serif";
	ctx.textAlign = "center";

	for ( var i = 0; i < pies; i++) {
		ctx.beginPath();
		ctx.fillStyle = (i % 2) ? red : blue;

		var startAngle = (angleIncrease * (i + pies));
		var endAngle = (angleIncrease * (i + pies + 1));

		ctx.arc(circleCenterX, circleCenterY, diameter, startAngle, endAngle,
				false); // Outer circle
		ctx.stroke();
		ctx.closePath();

		ctx.fill();
		ctx.save();
		{
			ctx.translate(circleCenterX, circleCenterY);
			ctx.rotate(startAngle);

			ctx.beginPath();
			ctx.moveTo(0, 0);

			ctx.lineTo(diameter, 0);
			ctx.rotate(angleIncrease);
			ctx.lineTo(diameter, 0);
			ctx.closePath();
			ctx.fill();

			ctx.rotate(-angleIncrease);
			ctx.rotate(ninety + angleIncrease / 2);
			ctx.beginPath();
			ctx.fillStyle = black;
			ctx.fillText(relatives[i][0], 0, - (diameter-25) );
			ctx.fillText(relatives[i][1], 0, - (diameter-40) );

			ctx.closePath();

		}
		ctx.restore();
	}

}
